<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="pageSettings" tab="页面属性">
      <DrawSettingsPanel></DrawSettingsPanel>
    </a-tab-pane>
    <a-tab-pane key="compSettings" tab="组件属性" force-render>
      <div>组件名: {{ showCompInfo?.text }}</div>
      <div>组件实例ID:</div>
      <div>{{ showCompInfo?.id }}</div>
      <component :is="map.get(showCompSetting)" v-model="showCompInfo"></component>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
import { OneDivLayoutCompSettings } from './layout-components/index'
import { TextCompSettings } from './basic-components/index'
import { useDesignerStore } from '@/stores/designerStore'
import { storeToRefs } from 'pinia'
import type { Component as VueComp } from 'vue'

const map = new Map<string, VueComp>()
map.set('OneDivLayoutComp', OneDivLayoutCompSettings)
map.set('TextComp', TextCompSettings)

const activeKey = ref('pageSettings')
const designerStore = useDesignerStore()
const { showCompSetting, showCompInfo } = storeToRefs(designerStore)
watch(showCompSetting, () => {
  activeKey.value = 'compSettings'
})
</script>

<style scoped></style>
